<template>
    <div class="user-manage">
        <!-- 搜索表单 -->
        <el-form :inline="true" class="search-form">
            <div class="btn-group">
                <el-button type="warning" @click="handleReview('batch')" size="small">
                    <el-icon><Check /></el-icon>
                    批量审批
                </el-button>
            </div>
        </el-form>
        <!-- 表格数据 -->
        <el-table 
            :data="tableData" 
            style="width: 100%" 
            border 
            :header-cell-style="{ background: 'rgb(216,231,246)' }" 
            max-height="500"
            @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" width="55" />
            <el-table-column prop="fundraisingProjectsId" label="募捐项目ID" width="100" />
            <el-table-column prop="fundraisingProjectsName" label="募捐项目名称" width="150" />
            <el-table-column prop="fundraisingProjectsPhoto" label="募捐项目图片" width="110">
                <template #default="scope">
                    <el-image :src="imageUrl + scope.row.fundraisingProjectsPhoto" style="width: 50px; height: 50px" />
                </template>
            </el-table-column>
            <el-table-column prop="fundraisingProjectsIntroduction" label="募捐项目简介" width="200" />
            <el-table-column prop="fundraisingProjectsType" label="募捐项目类型" width="110">
                <template #default="scope">
                    <el-tag :type="scope.row.fundraisingProjectsType === '教育助学' ? 'primary' : scope.row.fundraisingProjectsType === '扶危助困' ? 'danger' : scope.row.fundraisingProjectsType === '乡村振兴' ? 'warning' : 'success'">{{ scope.row.fundraisingProjectsType  }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="expectedFundraisingAmount" label="期望募捐金额" width="110" />
            <el-table-column prop="fundraisingProjectsStartTime" label="募捐项目开始时间" :formatter="handleFormatDate" width="160" />
            <el-table-column prop="fundraisingProjectsEndTime" label="募捐项目结束时间" :formatter="handleFormatDate" width="160" />
            <el-table-column label="操作" fixed="right">
                <template #default="{ row }">
                    <el-button link type="primary" @click="handleReview('single', row)">审批通过</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
  
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { adminApi } from '../../api/app';
import { Check } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus';
import { imageUrl } from '../../api/request';
import { handleFormatDate } from './ts/common'

/** 表格数据 */
const tableData = ref([])
/** 多选选中内容 */
const selection = ref<any[]>([]);
 
// 初始加载
onMounted(() => {
    // 获取未审批募捐项目列表
    getUnReviewFundraisingList();
});

/** 获取未审批募捐项目信息列表 */
const getUnReviewFundraisingList = () => {
    adminApi.getUnreviewedFundraisingProjects().then((res: any) => {
        if (res) {
            tableData.value = res;
        }
    });
};
  
/** 多选变化 */
const handleSelectionChange = (val: any) => {
    selection.value = val;
};

/** 审批通过 */
const handleReview = (control: string, row?: any) => {
    const projects = control === 'batch' ? selection.value : [row];
    console.log('projects', projects);
    const updatePromises = projects.map(item => adminApi.updateFundraisingProject({ ...item, fundraisingProjectsStatus: 1 }));
    // 利用 Promise.all 批量更新募捐项目状态
    Promise.all(updatePromises).then(res => {
        if (res) {
            ElMessage.success('审批成功');
            getUnReviewFundraisingList();
            // 批量审批清空选中内容
            if (control === 'batch') {
                selection.value = [];
            };
        }
    }).catch(err => {
        ElMessage.error('审批失败，请重试');
    });
}
</script>
  
<style scoped lang="less">
@import "./css/tableForm.less";
</style>